<template>
  <el-card>
    <div>
      <el-radio-group v-model="boxQueryParam.warehouseId" v-if="warehouseList.length > 1" @change="getGoodsData" class="platform-radio">
        <el-radio-button
          v-for="item in warehouseList"
          :key="item.id"
          :label="item.id"
        >
          {{item.warehouseName}}
        </el-radio-button>
      </el-radio-group>
    </div>
    <el-tabs v-model="boxQueryParam.stockType" @tab-click="changeBoxTable">
      <el-tab-pane label="混装" name="mixin"></el-tab-pane>
      <el-tab-pane label="整箱" name="box"></el-tab-pane>
    </el-tabs>
    <div>
      <el-radio-group v-model="boxQueryParam.boxType">
        <el-radio-button
          v-for="item in boxTypeList"
          :key="item.label"
          :label="item.label"
        >
          {{item.text}}
        </el-radio-button>
      </el-radio-group>
    </div>

    <div class="mgt10 mgb10" v-loading="loading">
      <template v-if="boxQueryParam.stockType === 'mixin'">
        <template v-if="boxQueryParam.boxType === 'stock'">
          <edit-stock-num-mixin stock-field="stockNum" :goods-list="oneGoodsList" origin-stock-field="originStockNum" @changeStockNum="getData" :warehouse-id="boxQueryParam.warehouseId"></edit-stock-num-mixin>
        </template>
        <template v-else-if="boxQueryParam.boxType === 'middleStock'">
          <edit-stock-num-mixin stock-field="middleStockNum" :goods-list="middleGoodsList" origin-stock-field="originMiddleStockNum" @changeStockNum="getData" :warehouse-id="boxQueryParam.warehouseId"></edit-stock-num-mixin>
        </template>
        <template v-else-if="boxQueryParam.boxType === 'fullStock'">
          <edit-stock-num-mixin stock-field="fullStockNum" :goods-list="fullGoodsList" origin-stock-field="originFullStockNum" @changeStockNum="getData" :can-edit="false" :warehouse-id="boxQueryParam.warehouseId"></edit-stock-num-mixin>
        </template>
      </template>
      <template v-if="boxQueryParam.stockType === 'box'">
        <template v-if="boxQueryParam.boxType === 'stock'">
          <edit-stock-num-box box-type="stock" :suit-id="suitId" :warehouse-id="boxQueryParam.warehouseId"></edit-stock-num-box>
        </template>
        <template v-else-if="boxQueryParam.boxType === 'middleStock'">
          <edit-stock-num-box box-type="middleStock" :suit-id="suitId" :warehouse-id="boxQueryParam.warehouseId"></edit-stock-num-box>
        </template>
        <template v-else-if="boxQueryParam.boxType === 'fullStock'">
          <edit-stock-num-box box-type="fullStock" :suit-id="suitId" :can-edit="false" :warehouse-id="boxQueryParam.warehouseId"></edit-stock-num-box>
        </template>
        <template v-else>
          <box-label-table :box-type="boxQueryParam.boxType" :suit-id="suitId" :warehouse-id="boxQueryParam.warehouseId"></box-label-table>
        </template>
      </template>
    </div>

  </el-card>
</template>

<script>
import EditStockNumBox from "@/views/stock/components/EditStockNumBox.vue";
import EditStockNumMixin from "@/views/stock/components/EditStockNumMixin.vue";
import BoxLabelTable from "@/views/stock/components/BoxLabelTable.vue";
import request from "@/utils/request";
import warehouseListMixin from "@/views/stock/mixin/warehouseListMixin";

export default {
  name: "StockCard",
  components: {BoxLabelTable, EditStockNumMixin, EditStockNumBox},
  mixins: [warehouseListMixin],
  props: {
    suitId: {
      required: true,
    }
  },
  computed: {
    boxTypeList(){
      const arr1 = [
        {label: 'stock', text: '代发库存（已上架）'},
        {label: 'middleStock', text: '暂存库存（已上架）'},
        {label: 'fullStock', text: '快出库存'},
      ];
      const arr2 = [
        {label: 'stock', text: '代发库存（已上架）'},
        {label: 'stockWait', text: '代发库存（待上架）'},
        {label: 'middleStock', text: '暂存库存（已上架）'},
        {label: 'middleStockWait', text: '暂存库存（待上架）'},
        {label: 'fullStock', text: '快出库存'},
        {label: 'onWayStock', text: '在途库存'},
      ];
      return this.boxQueryParam.stockType === 'mixin' ? arr1 : arr2
    },
    // 一件代发的商品
    oneGoodsList(){
      return this.allGoodsList.filter(item => {
        if(item.isSystem){
          return true
        }
        if(item.isGoods && item.inventoryId){
          return !item.catalogListing;
        }
        return false;
      })
    },
    // 中转送仓库存
    middleGoodsList(){
      return this.allGoodsList.filter(item => {
        if(item.isTB){
          return true
        }
        if(item.isGoods && item.inventoryId){
          return true
        }
        return false
      })
    },
    // 待送仓库存商品列表
    fullGoodsList(){
      return this.allGoodsList.filter(item=>{
        return item.isGoods && item.inventoryId
      })
    },
  },
  data(){
    return {
      boxQueryParam: {
        stockType: 'mixin',
        boxType: 'stock',
        page: 1,
        pageSize: 10,
        warehouseId: 0,
      },
      allGoodsList: [],
      loading: false,
    }
  },
  created() {
    // this.getData()
  },
  methods: {
    warehouseFinish(){
      this.boxQueryParam.warehouseId = this.warehouseList[0]?.id;
      this.getData()
    },
    getData(){
      this.loading = true
      const params = {
        warehouseId: this.boxQueryParam.warehouseId,
      }
      request({
        url: `/stock/getStockAllGoods/${this.suitId}`,
        params,
      })
        .then(res=>{
          this.loading = false
          this.allGoodsList = res.data.map(item => {
            // 记录原来的库存 用于判断数据有没有变化
            item.originInventory = item.inventory;
            item.originStockNum = item.stockNum;
            item.originMiddleStockNum = item.middleStockNum;
            item.originFullStockNum = item.fullStockNum;

            // item.stockNumList.forEach( stockItem => {
            //   stockItem.originNum = stockItem.num
            // })
            // item.middleStockNumList.forEach( stockItem => {
            //   stockItem.originNum = stockItem.num
            // })
            return item
          })
        })
    },
    changeBoxTable(){
      this.boxQueryParam.page = 1;
      this.boxQueryParam.boxType = 'stock'
      this.getGoodsData()
    },
    getGoodsData(){
      if(this.boxQueryParam.stockType === 'mixin'){
        this.getData()
      }
    }
  },
}
</script>


<style scoped lang="scss">

</style>
